<template>
	<view>
		<view class="u-m-b-18 u-flex u-col-center">
			<view class="u-m-r-16">
				<u-avatar :src="userInfo.avatar" mode="circle" size="60"></u-avatar>
			</view>
			<view class="userName u-font-28">
				<view style="display: flex;justify-content: center;align-items: center;">{{userInfo.nickName || userInfo.userName || '用户名'}}
					<image :src="userInfo.officalFlag==='0'?'':'https://app.zbzedu.com/static/WaChat/img/guanfang.png'" style="width: 64rpx;height: 32rpx;margin-left: 10rpx;"></image>
				</view>
				<view style="color: rgba(4, 4, 4, 0.38);" class="u-font-20">{{ $u.timeFrom(infoData.createTime) }}
				</view>
			</view>
			<view class="u-flex-1 u-text-right" v-if="showAction">
				<u-icon name="more-dot-fill" @click="moreAction" color="rgba(4, 4, 4, 0.5)" size="36"></u-icon>
			</view>
		</view>
		<view class="color-16 u-font-32 u-m-t-16 u-m-b-16 u-p-l-76" style="color: rgba(16, 16, 16, 1);">
			<view>
				<text space="nbsp" style="word-break: break-all">{{infoData.commentDesc || ''}}</text>
			</view>
		</view>
		<view class="img-wrp u-m-t-16  u-p-l-76" v-if="infoData.fileList.length">
			<view class="single-img" v-if="infoData.fileList.length === 1">
				<img :src="item.fileUrl" class="img" mode="aspectFill" v-for="item in infoData.fileList"
					@click="preview(infoData.fileList, item)" />
			</view>
			<view class="imgs u-flex flex-between u-flex-wrap" v-if="infoData.fileList.length > 1">
				<img :src="item.fileUrl" class="img" mode="aspectFill" v-for="item in infoData.fileList"
					@click="preview(infoData.fileList, item)" />
				<text style="width: 202rpx;"></text>
			</view>
		</view>
		<view class="u-p-l-76 u-m-t-20 u-p-r-30" v-if="infoData.diaryReplyList.length && !hideReply">
			<view class="reply-wrap u-p-20 u-font-32" @click="toComment">
				<view v-for="(item, index) in infoData.diaryReplyList" :key="index" v-if="index < showLength">
					<view>
						<text style="color: rgba(4, 4, 4, 1)">
							{{ item.replyUser.nickName }}：
							<text v-if="item.normalUser">
								回复{{ item.normalUser.nickName }}：
							</text>
						</text>
						<text style="color: rgba(4, 4, 4, .49);word-break: break-word;">{{ item.replyDesc }}</text>
					</view>
				</view>
				<view class="color-active u-p-t-8" v-if="infoData.diaryReplyList.length > 2 && showLength === 2"
					@click="showMore">
					查看全部{{ infoData.diaryReplyList.length }}条回复
				</view>
			</view>
		</view>
		<view class="tool-bar u-flex u-m-t-30 u-p-b-20" :class="{'u-border-bottom':borderBottom}">
			<button style="background: transparent;color: #101010;font-size: 28upx" class="button-row" id="shareBtn"
				type="primary">

			</button>
			<view class="u-flex-1 u-text-right u-flex" style="flex-direction: row-reverse">
				<view class="item-bar u-flex flex-center" @click="like">
					<u-icon
						:name="infoData.likeFlag ? 'https://app.zbzedu.com/static/WaChat/icon/liked.png' :'https://app.zbzedu.com/static/WaChat/icon/like.png' "
						size="36" class="u-m-r-10"></u-icon>
					<span
						:class="{'color-active': infoData.likeFlag }">{{infoData.likeNum ? infoData.likeNum : '点赞'}}</span>
				</view>
				<view class="item-bar u-flex flex-center u-m-r-20" @click="toComment">
					<u-icon name="https://app.zbzedu.com/static/WaChat/icon/env.png" color="#888" size="36" class="u-m-r-10">
					</u-icon>
					<span>{{infoData.commentNum || '回复'}}</span>
				</view>
			</view>
			<u-action-sheet :list="isCurrentUser ? delList : jubaolist" v-model="show" @click="click"
				border-radius="18"></u-action-sheet>
		</view>
	</view>
</template>

<script>
	import {
		THEME
	} from "../../mixins/config.js";
	import {
		request
	} from "../../../util/api";
	import {
		TOAST
	} from '../../../util/util'

	export default {
		props: {
			infoData: Object,
			userInfo: Object,
			showHeader: {
				type: Boolean,
				default () {
					return true
				}
			},
			showType: {
				type: Boolean,
				default () {
					return true
				}
			},
			borderBottom: {
				type: Boolean,
				default () {
					return true
				}
			},
			showReplay: {
				type: Boolean,
				default () {
					return true
				}
			},
			showAction: {
				type: Boolean,
				default () {
					return true
				}
			},
			hideReply: {
				type: Boolean,
				default () {
					return false
				}
			},
			eclipse: {
				type: Boolean,
				default () {
					return true
				}
			}
		},

		data() {
			return {
				list: {},
				jubaolist: [{
					text: '举报',
					color: THEME.text_active_color
				}],
				delList: [{
					text: '删除',
					color: '#FF0101'
				}],
				show: false,
				userId: '',
				showLength: 2
			}
		},

		created() {
			// this.getCurrentUser()
		},

		computed: {
			isCurrentUser() {
				if (this.infoData.compassNormalUser) {
					return this.infoData.compassNormalUser.userId === uni.getStorageSync(process.env.NODE_ENV + 'zbz_user')
						.userId
				}
				return false
			}
		},

		methods: {
			moreAction() {
				this.show = true
			},
			like() {
				request({
					url: `/system/CompassLikeLog/system/wx/updateLikeLog/${this.infoData.id}/5`
				}).then(res => {
					if (res.msg == '点赞成功') {
						this.infoData.likeNum++
					} else {
						this.infoData.likeNum--
					}
					this.infoData.likeFlag = !this.infoData.likeFlag
					this.$emit('likeChange', this.infoData)
				})
			},

			showMore() {
				// this.showLength = 9999
			},

			click() {
				if (this.isCurrentUser) {
					uni.showModal({
						title: '提示',
						content: '确认删除该评价吗？',
						success: res => {
							if (res.confirm) {
								request({
									url: '/system/CompassDiaryComment/' + this.infoData.id,
									method: 'DELETE'
								}).then(res => {
									TOAST('删除成功!')
									this.$emit('delete')
								})
							}
						}
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '确认举报该评价吗？',
						success: res => {
							if (res.confirm) {
								request({
									url: '/system/DiaryReport',
									method: 'post',
									data: {
										linkId: this.infoData.id,
										linkType: 2
									}
								}).then(res => {
									TOAST('举报成功!')
								})
							}
						}
					})
				}
			},

			toComment() {
				if (!this.showReplay) {
					this.$emit('reply')
					return
				}
				this.$u.route({
					url: '/package/forum/comment?commentId=' + this.infoData.id + '&diaryId=' + this.infoData.diaryId
				})
			},

			getCurrentUser() {
				// 判断缓存里面是否有用户信息
				let storage = uni.getStorageSync(process.env.NODE_ENV + 'zbz_user')
				if (storage.userId) {
					// 判断是否缓存中是否存在用户ID
					this.userId = storage.userId
					return
				}
				// 如果不存在就发送请求获取用户信息
				request({
					url: '/app/userCenter/getLoginUserInfo'
				}).then(ret => {
					this.list = ret.data;
					if (ret.data && ret.data.avatar) {
						this.avatar = ret.data.avatar;
					} else {
						this.avatar = "../../image/photo.png";
					}
					let storage = uni.getStorageSync(process.env.NODE_ENV + 'zbz_user')
					storage.userId = ret.data.userId
					this.userId = ret.data.userId
					uni.setStorageSync(process.env.NODE_ENV + 'zbz_user', storage)
				})
			},

			preview(list, current) {
				const tempFilePaths = list.map(item => item.fileUrl)
				uni.previewImage({
					urls: tempFilePaths,
					current: current.fileUrl
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.img-wrp {
		.single-img .img {
			width: 494rpx;
			height: 282rpx;
			border-radius: 12rpx;
		}

		.imgs .img {
			width: 202rpx;
			height: 202rpx;
			border-radius: 12rpx;
		}
	}

	.reply-wrap {
		background-color: rgba(187, 187, 187, .19);
		border-radius: 6px;
	}

	.userName {
		color: rgba(4, 4, 4, 1);
	}

	.huati-wrp {
		background-color: rgba(4, 4, 4, 1);
		border-radius: 26rpx;
	}

	.huati {
		width: 32rpx;
		height: 32rpx;
		border-radius: 100%;
		background: $btn_active_bg_color;
		color: #fff;
		text-align: center;
	}

	.color-16 {
		color: rgba(16, 16, 16, 1);
	}

	.button-row {
		padding-left: 0;
	}

	.button-row::after {
		content: "";
		border: none;
	}
</style>
